<template>
  <div id="detail_comment">
    <div class="detail_comment_head">
      <div class="comment_head_left">用户评论</div>
      <div class="comment_head_right">更多&rang;</div>
    </div>
    <!--  用户评价详情  -->
    <div class="comment_content" v-for="(item,index) in commentInfos.list" :key="index">
      <div class="comment_user">
        <img :src="item.user.avatar">
        <span>{{item.user.uname}}</span>
      </div>
      <div class="comment_content_message">
<!--    这里还需要展示时间，但是服务器传递过来的是时间戳
        1.将时间戳转成Date对象，
        2.将date进行格式化，转成对应的字符串
-->
        {{item.content}}
        <div class="comment_content_param">
          {{item.style}}
        </div>

      <!--    用户晒照    -->
        <div class="comment_content_img">
          <img v-for="item2 in item.images" :src="item2" :key="item2">
        </div>

      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "DetailComment",
  props: {
    commentInfos:{
      type:Object,
      default(){
        return {}
      }
    },
  },
  data(){
    return{
      myDate: ''
    }
  },
  created() {
  },
  methods:{
  }
}
</script>

<style scoped>
  #detail_comment{
    width: 95%;
    margin: 10px auto;
    background: #FFFFFF;
    padding-bottom: 10px;
  }
  .detail_comment_head{
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-bottom: 2px solid #cccccc;
  }
  .detail_comment_head div{
    text-align: left;
    flex: 1;
    font-size: 1.2em;
  }
  .detail_comment_head .comment_head_right{
    text-align: right;
  }
  .comment_user{
    height: 50px;
    line-height: 50px;
  }
  .comment_user img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: bottom;
  }
  .comment_user span{
    vertical-align: top;
    margin-left: 10px;
  }
  .comment_content_message{
    margin-top: 7px;
    padding: 0 10px;
  }
  .comment_content_param{
    margin-top: 7px;
    font-size: 15px;
    color: #cccccc;
    padding-left: 10px;
  }
  .comment_content_img{
    display: flex;
    flex-wrap: wrap;
  }
  .comment_content_img img{
    width: 80px;
    height: 80px;
    margin: 10px;
  }
</style>
